<script setup lang="ts">
import * as Enums from '@firewall/engine/Enums';
import Application from '@firewall/engine/Application';

const { t } = useI18n({ inheritLocale: true, useScope: 'local' });

interface Props {
  application?: string,
}
const props = withDefaults(defineProps<Props>(), {
  application: () => '',
});
type Emit = {
  (e: 'update:application', application: string): void,
}
const emit = defineEmits<Emit>();
const applications = ref([
  { name: t('all'), id: Enums.FILTER_ALL },
  ...(await Application.getSummaryList()),
]);

const onSelectorChange = (application: string) => {
  emit('update:application', application);
};
onErrorCaptured(() => false);
</script>

<template>
  <ElSelect
    :model-value="props.application"
    class="application-selector"
    :placeholder="t('all')"
    filterable
    @change="onSelectorChange"
  >
    <ElOption
      v-for="item in applications"
      :key="item.id"
      :value="item.id"
      :label="item.name"
    />
  </ElSelect>
</template>

<i18n lang="yaml" locale="zh-CN">
  all: '全部应用'
</i18n>
<i18n lang="yaml" locale="en-US">
  all: 'All Application'
</i18n>

<style lang="scss" scoped>
.application-selector {
  width: 140px;
}
</style>
